<template>
    <div class="count">
        <div class="topTit f f-a-c f-j-b">
            <div class="left f f-a-c">
                <img src="/src/status/img/logo.png" class="logo" alt="">
                <span>H.S.国际问题研究平台</span>
            </div>
            <div class="right">
                <img @click="setting" src="/src/status/img/cha.png" class="myStat" alt="">
            </div>
        </div>
        <div class="body">
            <div class="bgF">
                <div class="topic">创建话题</div>
                <div class="inpBox">
                    <input type="text" class="inp" placeholder="请输入话题" v-model="value" name="" id="">
                    <div class="imgBox" @click="HomePage" :class="{ act: value }"><img src="/src/status/dui.png"
                            class="duih" alt=""></div>
                </div>
                <!-- 你可以试试下面的话题 -->
                <div class="HaveaTry">你可以试试下面的话题</div>
                <!-- /下面的话题 -->
                <div class="topicList">
                    <div class="topicItem f f-a-c" v-for="(item, index) in getTopics" @click="topItem(item.name)"
                        :key="index">
                        <img src="/src/status/10.png" class="listImg" alt="">
                        {{ item.name }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import router from '../../router';
import { ref, onMounted } from 'vue'
import { CreateTopics, Chat } from '../../api/index.js'
import { showToast } from 'vant'
const route = useRouter();
let value = ref('')
let list = ref([{ name: '二十四节气' }, { name: '食品百科' }, { name: '中国近现代史' }, { name: '世界地理' }])
let getTopics = ref([])
onMounted(() => {
    initTuiJian()
})
const initTuiJian = async () => {
    let n = await Chat()
    getTopics.value = n.content.topics_list
}
// 返回首页
const setting = () => {
    // router.push('/IndexMove')
    router.go(-1)
}
// 点击话题后把话题放入input框里
const topItem = (item) => {
    value.value = item
}
// 点击跳转到话题热搜首页=======================================================================================
const HomePage = async () => {
    console.log(value.value, '0.0.00..00');
    // router.push('/DataSearchIndex')
    let n = await CreateTopics({
        name: value.value
    })
    showToast(n.msg)
    if (n.code == 200) {
        setTimeout(() => {
            router.go(-1)
        }, 1000);
    }
    // console.log(route.currentRoute);
}
</script>
<style lang="scss" scoped>
@function pxfn($px) {
    @return calc($px / 3.75) * 1vw;
}

.topicList {
    .topicItem {
        width: 100%;
        // height: pxfn(48);
        background: #f7f8fa;
        border-radius: pxfn(8);
        padding: 0 pxfn(15);
        font-size: pxfn(14);
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 600;
        text-align: LEFT;
        color: #1d2129;
        margin-top: pxfn(15);
        padding-top: pxfn(15);
        padding-bottom: pxfn(10);

        .listImg {
            width: pxfn(18);
            height: pxfn(18);
            margin-right: pxfn(10);
        }
    }
}

.inpBox {
    position: relative;
    width: 100%;
    height: pxfn(72);

    .inp {
        width: 100%;
        height: 100%;
        border: none;
        border-bottom: pxfn(1) solid #edf3fa;
        font-size: pxfn(22);
        font-family: PingFang SC, PingFang SC-600;
        font-weight: 600;
        text-align: LEFT;
        padding-right: pxfn(70);
        color: #585656;
    }

    .inp::placeholder {
        color: #c2bfbf;
    }

    .imgBox {
        position: absolute;
        top: 50%;
        right: pxfn(1);
        transform: translateY(-50%);
        width: pxfn(60);
        height: pxfn(40);
        background: #dadce0;
        border-radius: pxfn(20);
        display: flex;
        align-items: center;
        justify-content: center;

        .duih {
            width: pxfn(20);
            height: pxfn(20);
        }
    }

    .act {
        background-color: #32bbea;
    }
}

.body {
    height: calc(100vh - pxfn(48));
    background-color: #edf3fa;
    padding: pxfn(15);

    .bgF {
        padding: pxfn(15);
        border-radius: pxfn(10);
        background-color: #fff;

        .topic {
            font-size: pxfn(16);
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 600;
            color: #1d2129;
        }

        .HaveaTry {
            font-size: pxfn(14);
            font-family: PingFang SC, PingFang SC-400;
            font-weight: 400;
            text-align: LEFT;
            color: #868d9c;
            margin: pxfn(20) 0;
        }
    }
}

.count {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    padding-top: pxfn(50);
}

.topTit {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: pxfn(48);
    border: 1px solid #edf3fa;
    padding: pxfn(15);
    z-index: 1;
    font-size: pxfn(14);
    font-weight: 600;

    .logo {
        width: pxfn(27);
        height: pxfn(24);
        margin-right: pxfn(10);
    }

    .myStat {
        width: pxfn(24);
        height: pxfn(24);
    }
}
</style>